<template>
  <div>
    <!-- 新增 start -->
    <el-form ref="searchForm" :inline="true" :model="form" size="mini">

      <!-- 搜索框 电话号： start -->
      <el-form-item :label="showLabel('dianhua')">
        <el-input size="mini" v-model="form.phoneno1" style="width: 200px;" />
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" size="mini" icon="el-icon-search" @click="onSearch(form)">
          {{ showLabel('search') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <as-button type="primary" @click="showFormToCreate()">{{ _label("button-create") }}</as-button>
      </el-form-item>
    </el-form>

    <!-- 新增 end -->

    <!-- 数据列表 start -->
    <el-row :gutter="20">
      <el-col :span="24">
        <simple-admin-tablelist ref="tablelist" v-bind="props" :onclickupdate="showFormToEdit"></simple-admin-tablelist>
      </el-col>
    </el-row>
    <!-- 数据列表 end -->

    <!-- 修改对话框 start -->
    <el-dialog
        class="user-form user-dialog"
        :title="_label('menu-7-2')"
        :visible.sync="dialogVisible"
        :center="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="700px">
      <el-tabs type="border-card" @tab-click="onTabClick" activeName="member">
        <!-- 用户管理 start -->
        <el-tab-pane :label="_label('menu-7-2')" name="member">
          <el-form ref="order-form" class="order-form" :model="form" label-width="85px" :inline="true"
                   style="width:700px;" size="small" :rules="formRules" :inline-message="false" :show-message="false">
            <el-col :span="11">
              <el-form-item :label="_label('xingming')" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item :label="_label('dianhua')" prop="phoneno">
                <el-input v-model="form.phoneno"></el-input>
              </el-form-item>
              <el-form-item :label="_label('gender')" prop="gender">
                <el-radio-group v-model="form.gender" style="width:200px">
                  <el-radio :label="'1'">{{ _label("man") }}</el-radio>
                  <el-radio :label="'2'">{{ _label("woman") }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="_label('shengri')" >
                <el-date-picker v-model="form.birthday" type="date" value-format="yyyy-MM-dd"
                                :placeholder="_label('xuanzeriqi')"></el-date-picker>
              </el-form-item>
              <el-form-item :label="_label('email')">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item :label="_label('weixin')">
                <el-input v-model="form.wechat"></el-input>
              </el-form-item>
              <el-form-item :label="_label('QQ')">
                <el-input v-model="form.qq"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="_label('idno')">
                <el-input v-model="form.idno"></el-input>
              </el-form-item>
              <el-form-item :label="_label('daima')">
                <el-input v-model="form.code"></el-input>
              </el-form-item>
              <el-form-item :label="_label('huiyuankahao')">
                <el-input v-model="form.membercard"></el-input>
              </el-form-item>
              <el-form-item :label="_label('dengjiren')" prop="creatorid">
                <simple-select v-model="form.creatorid" source="currentUsers"></simple-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-tab-pane>
        <!-- 用户管理 end -->

        <!-- 地址信息 start -->
        <el-tab-pane :label="_label('shouhuodizhi')" name="address" :disabled="id==0">
          <simple-admin-page v-bind="address"></simple-admin-page>
        </el-tab-pane>
        <!-- 地址信息 end -->
      </el-tabs>

      <!-- 按钮组 start -->
      <span slot="footer" class="dialog-footer">
        <!-- 保存 start -->
        <auth auth="user">
          <as-button type="primary" @click="onSubmit">{{ _label('baocun') }}</as-button>
        </auth>
        <!-- 保存 end -->

        <!-- 退出 start -->
        <as-button type="primary" @click="onQuit">{{ _label("tuichu") }}</as-button>
        <!-- 退出 end -->
      </span>
      <!-- 按钮组 end -->
    </el-dialog>
    <!-- 修改对话框 end -->
  </div>
</template>

<script>
import SimpleAdminTablelist from "@/component/Simple_Admin_TableList"
import globals, {_label, extract, showLabel} from '../globals.js';

export default {
  name: 'sp-member',
  components: {SimpleAdminTablelist},
  data() {
    return {
      dialogVisible: false,
      form: {
        id: '',
        name: '',
        email: '',
        qq: '',
        wechat: '',
        creatorid: "",
        code: "",
        gender: "",
        birthday: "",
        phoneno: "",
        phoneno1: "",
        idno: "",
        membercard: "",
        contactor_name:"",
      },
      listLoading: true,
      currentTab: "member",
      pagination: {
          pageSizes: globals.pageSizes,
          pageSize: 10,
          total: 0,
          current: 1
      },
      props: {
        columns: [
          {
            name: "name",
            label: _label("xingming"),
            is_create: true,
            is_update: true,
            is_show: true,
            is_focus: true,
            width: 200
          },
          {
            name: "code",
            label: _label("daima"),
            is_create: true,
            is_update: true,
            is_show: true,
            width: 200,
            is_focus: true
          },
          {
            name: "membercard",
            label: _label("huiyuankahao"),
            is_create: true,
            is_update: true,
            is_show: true,
            width: 200,
            is_focus: true
          },
          {
              name: "gender",
              label: _label("xingbie"),
              type: "select",
              source: "gender2",
              class: "width2",
              width: 80,
          },
          {
              name: "created_at",
              label: _label("dengjiriqi"),
              is_create: true,
              is_update: true,
              is_show: true,
              width: 200,
              is_focus: true
          },
          {
              name: "phoneno",
              label: _label("dianhua"),
              is_create: true,
              is_update: true,
              is_show: true,
              width: 200,
              is_focus: true
          },
          {
              name: "contactor_name",
              label: _label("dengjiren"),
              is_create: true,
              is_update: true,
              is_show: true,
              width: 200,
              is_focus: true
          },
        ],
        controller: "member",

      },
    address: {
        columns: [
            {name: "name", label: _label("shouhuoren"), class: "width2", width: 120},
            {name: "tel", label: _label("dianhua"), class: "width2", width: 120},
            {name: "address", label: _label("shouhuodizhi"), class: "width1", is_hide: true},
            {
                name: "countryid",
                label: _label("guojiadiqu"),
                type: "select",
                source: "country",
                class: "width2"
            },
            {name: "zipcode", label: _label("youbian"), class: "width2", width: 80, is_hide: true},
            {name: "province", label: _label("shengfen"), class: "width2", width: 120},
            {name: "city", label: _label("chengshi"), class: "width2", width: 120},
            {
                name: "is_default",
                label: _label("set-default"),
                type: "select",
                source: "is_default",
                class: "width2",
                width: 80
            },
            {name: "idno", label: _label("idno"), class: "width2", width: 120},

        ],
        controller: "memberaddress",
        auth: "member",
        base: {
            member_id: ''
        },
        options: {
            dialogWidth: '800px',
            inline: true
        },
      },
        id: 0,

    };
  },
  methods: {
    // 退出对话框
    onQuit() {
      this.dialogVisible = false
    },
    getList(){
        let self = this;
        // 引入 loading
        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0,0,0,0.7)'
        });
        let params = Object.assign({
            page: self.pagination.current,
            pageSize: self.pagination.pageSize
        }, self.form);
        self._fetch("/member/page",params).then(function (res) {
            if (res) {
                // 关闭对话框
                loading.close();
            }
        })
    },
    onSearch(form){
        let self = this;
        self.$refs.tablelist.search(form);
        self._hideDialog("search");
    },
    // 保存逻辑
    onSubmit() {
      var self = this;
      self.validate().then(() => {
        let params = globals.extend(self.form);
        if (self.form.id == "") {
          self._submit("/member/add", params).then(function (res) {
            self.$refs.tablelist.appendRow(globals.clone(self.form));
            self.form.id = res.id;
          });
        } else {
          params.id = self.form.id;
          self._submit("/member/edit", params).then(function () {
            globals.copyTo(self.form, self.row);
          });
        }
      });
    },
    // 切换 tab 标签
    onTabClick(tab) {
      let self = this;
      self.currentTab = tab.name;
    },
    // 编辑逻辑
    showFormToEdit(rowIndex, row) {
        var self = this;
        self.rowIndex = rowIndex;
        self.row = row;
        globals.copyTo(row, this.form);
        self.dialogVisible = true;
        self.id = row.id
        self.address.base.member_id = row.id

    },
    // 新增逻辑
    showFormToCreate() {
      var self = this;
      globals.empty(self.form);
      self.clearValidate(50);
      self.dialogVisible = true;
      self.id = 0;
    },
  },
  // 挂载前调用
  mounted() {
      // 验证规则
      let self = this;
      self.initRules(Rules => {
          let _label = self._label
          return {
              name: [{
                  required: true,
                  message: showLabel('name') + showLabel('required'),
                  trigger: 'blur'
              }],
              phoneno: [{
                  required: true,
                  message: showLabel('dianhua') + showLabel('required'),
                  trigger: 'blur'
              }],
              gender: [{
                  required: true,
                  message: showLabel('gender') + showLabel('required'),
                  trigger: 'blur'
              }],
              // 登记人
              creatorid: [{
                  required: true,
                  message: showLabel('dengjiren') + showLabel('required'),
                  trigger: 'blur'
              }],

          }
      })
  },
};
</script>
